<template>
  <view :class="theme">
    <view class="fixed left-[var(--window-left)] right-[var(--window-right)] top-0 bottom-0">
      <uv-image width="100%" height="100%" src="/static/img/bg-main.png" />
    </view>

    <view class="z-1 m-18">
      <uv-image width="100%" height="570" src="/static/img/home/0.png" />
      <view class="mt-12">
        <uv-image width="200" height="36" src="/static/img/home/1.png" />
      </view>

      <view class="mt-20 flex-row flex-wrap">
        <view v-for="(item, index) in 4" :key="index" class="w-[calc((100%-40rpx)/2)] bg-2 b-rounded-20 overflow-hidden"
          :style="{ margin: `0 ${index % 2 ? 0 : '20rpx'} 20rpx 0` }">
          <uv-image width="100%" height="300" src="" />

          <view class="m-24">
            <text class="multi-ellipsis">潮玩城市闪卡【限量发售】</text>
            <text>¥20.00</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useMapState } from "@/common/libs/store";

const { theme } = useMapState(["theme"]);

</script>

<style lang="scss" scoped>
// scss
</style>